<template>
  <section class="main" v-loading="resultObj.trafficLoading || resultObj.orderLoading">
    <template v-if="locale == 'en'">
      <RecordEn :result="resultObj" @page-change="onPageChange" />
    </template>
    <template v-else-if="locale == 'zh-cn'">
      <RecordZhcn :result="resultObj" @page-change="onPageChange" />
    </template>
  </section>
</template>

<script lang="ts" setup name="HomePage">
  import { computed, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { setLang } from '@/i18n';
  import { useI18n } from 'vue-i18n';
  import { orderApi, trafficApi } from '@/api/index';
  import type { FormInstance, FormRules } from 'element-plus';
  import RecordEn from './components/record/en.vue';
  import RecordZhcn from './components/record/zh-cn.vue';

  const { locale } = useI18n();

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const resultObj = reactive({
    orderData: [],
    trafficData: [],
    orderLimit: 20,
    orderPage: 1,
    orderTotal: 0,
    trafficLimit: 20,
    trafficPage: 1,
    trafficTotal: 0,
    orderLoading: false,
    trafficLoading: false,
    currentTab: '',
  });

  const getTraffic = async () => {
    if (resultObj.trafficLoading) return false;
    resultObj.trafficLoading = true;
    resultObj.trafficData = [];
    trafficApi({
      limit: resultObj.trafficLimit,
      page: resultObj.trafficPage,
    })
      .then((res) => {
        if (res.data) {
          resultObj.trafficData = res.data.list;
          resultObj.trafficTotal = res.data.count;
        }
        resultObj.trafficLoading = false;
      })
      .catch((err) => {
        console.log('err', err);
        resultObj.trafficLoading = false;
        ElMessage.error(err.message);
      });
  };

  const getOrder = async () => {
    if (resultObj.orderLoading) return false;
    resultObj.orderLoading = true;
    resultObj.orderData = [];
    orderApi({
      limit: resultObj.orderLimit,
      page: resultObj.orderPage,
    })
      .then((res) => {
        if (res.data) {
          resultObj.orderData = res.data.list;
          resultObj.orderTotal = res.data.count;
        }
        resultObj.orderLoading = false;
      })
      .catch((err) => {
        console.log('err', err);
        resultObj.orderLoading = false;
        ElMessage.error(err.message);
      });
  };

  const onPageChange = (type, val) => {
    if (type == 'traffic') {
      resultObj.trafficPage = val;
      getTraffic();
    } else if (type == 'order') {
      resultObj.orderPage = val;
      getOrder();
    }
  };

  onMounted(() => {
    resultObj.currentTab = route.query.name || '1';
    if (resultObj.currentTab == '1') {
      resultObj.trafficPage = 1;
      getTraffic();
    } else if (resultObj.currentTab == '2') {
      resultObj.orderPage = 1;
      getOrder();
    }
  });

  watch(
    () => locale.value,
    () => {
      resultObj.currentTab = route.query.name || '1';
      if (resultObj.currentTab == '1') {
        resultObj.trafficPage = 1;
        getTraffic();
      } else if (resultObj.currentTab == '2') {
        resultObj.orderPage = 1;
        getOrder();
      }
    },
    { deep: true, immediate: true },
  );
</script>
<style lang="scss">
  .main {
    min-height: calc(100vh - 148px);
  }
</style>
